<template>
  <div style="padding-bottom: 70px">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      style="margin-bottom: 20px"
    >
      <el-form-item label="订单号">
        <el-input v-model="formInline.orderNo" placeholder="订单号"></el-input>
      </el-form-item>
      <el-form-item label="收货人">
        <el-input
          v-model="formInline.consignee"
          placeholder="收货人"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="formInline.phone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select
          v-model="formInline.orderState"
          placeholder="订单状态"
          style="width: 120px"
        >
          <el-option label="已受理" value="已受理"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
          <el-option label="派送中" value="派送中"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间">
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
         value-format='yyyy-MM-dd HH:mm:ss'
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="orderNo" label="订单号" width="150">
      </el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="120">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="120">
      </el-table-column>
      <el-table-column prop="consignee" label="收货人" width="120">
      </el-table-column>
      <el-table-column prop="deliverAddress" label="配送地址" width="300">
      </el-table-column>
      <el-table-column prop="deliveryTime" label="送达时间" width="120">
      </el-table-column>
      <el-table-column prop="remarks" label="用户备注" width="120">
      </el-table-column>
      <el-table-column prop="orderAmount" label="订单金额" width="120">
      </el-table-column>
      <el-table-column prop="orderState" label="订单状态" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="clickEdit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 翻页 -->
    <el-pagination
      style="margin-top: 30px"
      :current-page="ctpage"
      @current-change="pagechange"
      :page-size="pagesize"
      layout="total, prev, pager, next,jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 查看当前行数据 -->
    <el-dialog title="查看订单详情" :visible.sync="getVisible">
  <el-form :model="form">
    <el-form-item label="订单号" :label-width="formLabelWidth">
      <el-input v-model="form.orderNo" autocomplete="off" disabled></el-input>
    </el-form-item>
  <el-form-item label="下单时间" :label-width="formLabelWidth">
      <el-input v-model="form.orderTime" autocomplete="off" disabled></el-input>
    </el-form-item>
     <el-form-item label="联系电话" :label-width="formLabelWidth">
      <el-input v-model="form.phone" autocomplete="off" disabled></el-input>
    </el-form-item>
     <el-form-item label="收货人" :label-width="formLabelWidth">
      <el-input v-model="form.consignee" autocomplete="off" disabled></el-input>
    </el-form-item>
     <el-form-item label="送货地址" :label-width="formLabelWidth">
      <el-input v-model="form.deliverAddress" autocomplete="off" disabled></el-input>
    </el-form-item>
     <el-form-item label="送达时间" :label-width="formLabelWidth">
      <el-input v-model="form.deliveryTime" autocomplete="off" disabled></el-input>
    </el-form-item>
     <el-form-item label="备注" :label-width="formLabelWidth">
      <el-input v-model="form.remarks" autocomplete="off" disabled></el-input>
    </el-form-item>
     <el-form-item label="订单金额" :label-width="formLabelWidth">
      <el-input v-model="form.orderAmount" autocomplete="off" disabled></el-input>
    </el-form-item>
     <el-form-item label="订单状态" :label-width="formLabelWidth">
      <el-input v-model="form.orderState" autocomplete="off" disabled></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="getVisible = false">取 消</el-button>
    <el-button type="primary" @click="getVisible = false">确 定</el-button>
  </div>
</el-dialog>
    <!-- 编辑当前行数据 -->
    <el-dialog title="修改订单" :visible.sync="isVisible">
      <el-form :model="editform">
        <el-form-item label="订单号" :label-width="formLabelWidth">
          <el-input v-model="editform.orderNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="下单时间" :label-width="formLabelWidth">
         <el-time-picker
    v-model="startTime"
    value-format='yyyy-MM-dd HH:mm:ss'
    :picker-options="{
      start: '00:00:00',
      end: '23:59:59'
    }"
    placeholder="请选择时间">
    </el-time-picker>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="editform.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货人" :label-width="formLabelWidth">
          <el-input v-model="editform.consignee" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="送货地址" :label-width="formLabelWidth">
          <el-input
            v-model="editform.deliverAddress"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="送达时间" :label-width="formLabelWidth">
           <el-time-picker
    v-model="endTime"
    value-format='yyyy-MM-dd HH:mm:ss'
    :picker-options="{
      start: '00:00:00',
      end: '23:59:59',
       minTime: startTime
    }"
    placeholder="请选择时间">
  </el-time-picker>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="editform.remarks" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单金额" :label-width="formLabelWidth">
          <el-input
            v-model="editform.orderAmount"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单状态" :label-width="formLabelWidth">
          <el-input v-model="editform.orderState" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureEdit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { orderList, orderEdit ,orderDetail} from "@/apis/orders";
import { hhmmss}  from "@/utils/utile" //暴露处理时间的工具函数

export default {
  data() {
    return {
      startTime:'',  //下单时间
      endTime: '',   //送达时间
      getVisible:false,   //查看状态下是否可见222
      isVisible: false, //查看状态下表格是否可见
      formLabelWidth: "80px",
      ctpage: 1, //当前页面
      pagesize: 5, //每一页的容量
      total: 20, //总的页数
      // 查询的时间选择插件
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: [], //时间
      formInline: {
        //这是订单表头部分
        orderNo: "", //订单号
        orderState: "", //订单状态
        consignee: "", //收货人
        phone: "", //收货电话
      },
      //这是用户数据的数组
      tableData: [],
      //编辑状态下表格
      editform: {
        id: "", //id
        orderNo: "", //订单号
        orderTime: "", //下单时间
        phone: "", //联系电话
        consignee: "", //收货人
        deliverAddress: "", //送货地址
        remarks: "", //备注
        orderAmount: "", //订单金额
        orderState: "", //订单状态
        deliveryTime: "",
      },
      //查看订单状态列表
      form: {
            id: "", //id
        orderNo: "", //订单号
        orderTime: "", //下单时间
        phone: "", //联系电话
        consignee: "", //收货人
        deliverAddress: "", //送货地址
        remarks: "", //备注
        orderAmount: "", //订单金额
        orderState: "", //订单状态
        deliveryTime: "",
      },
    };
  },
  methods: {
       //查询
    onSubmit() {
      orderList({
        currentPage: this.ctpage, //当前页数
        pageSize: this.pagesize, //每一页的容量
        orderNo:this.formInline.orderNo,
        consignee:this.formInline.consignee,
        phone:this.formInline.phone,
        orderState:this.formInline.orderState,
        date:this.value1        
      }).then((res) => {
        // console.log(res.data);
        this.tableData = res.data.data;
        this.total = res.data.total; //总的条数
         for(let obj of res.data.data){
        obj.orderTime=hhmmss(obj.orderTime)
        obj.deliveryTime=hhmmss(obj.deliveryTime)
        }
       
      });
     
    },
    pagechange(page) {
      this.ctpage = page;
      this.reqData();
    },
    //列表的渲染函数
    reqData() {
      orderList({
        currentPage: this.ctpage, //当前页数
        pageSize: this.pagesize, //每一页的容量
      }).then((res) => {
        // console.log(res.data);
        this.tableData = res.data.data;
        this.total = res.data.total; //总的条数
        for(let obj of res.data.data){
        obj.orderTime=hhmmss(obj.orderTime)
        obj.deliveryTime=hhmmss(obj.deliveryTime)
        }
      });
    },
    //点击编辑数据,数据回填
    clickEdit(row) {
      // console.log(row);
      this.isVisible = true;
      let {
        id,
        orderNo,
        orderTime,
        phone,
        consignee,
        deliverAddress,
        remarks,
        orderAmount,
        orderState,
        deliveryTime,
      } = row;
      this.editform.orderNo = orderNo;
      this.editform.orderTime = orderTime;   //下单时间
      this.editform.phone = phone;
      this.editform.consignee = consignee;
      this.editform.deliverAddress = deliverAddress;
      this.editform.remarks = remarks;
      this.editform.orderAmount = orderAmount;
      this.editform.orderState = orderState;
      this.editform.deliveryTime =deliveryTime;   //送达时间
      // console.log(this.startTime);
      this.editform.id = id;
      this.reqData();
    },
    //确定修改
    sureEdit() {
      orderEdit({
        id: this.editform.id,
        orderNo: this.editform.orderNo,
        orderTime: this.startTime,    //下单时间
        phone: this.editform.phone,
        consignee: this.editform.consignee,
        deliverAddress: this.editform.deliverAddress,
        deliveryTime: this.endTime ,    //送达时间
        remarks: this.editform.remarks,
        orderAmount: this.editform.orderAmount,
        orderState: this.editform.orderState,       
      }).then((res) => {
        if(res.data.code==0){
           this.$message({
            type: "success",
            message: "您已修改成功",
          });
        this.isVisible=false
        this.reqData()
        //  console.log(this.value2);
        //  console.log(this.value3);
        // console.log(this.tableData);
        }
      });
    },

    //点击查看
    handleClick(row) {
      // console.log(row);
      this.getVisible=true
      orderDetail({id:row.id}).then(res=>{
        // console.log(res);
 let {orderNo, orderTime, phone,consignee,deliverAddress,remarks,orderAmount,orderState,deliveryTime, } = res.data.data;
             this.form.consignee= consignee, 
             this.form.phone= phone, 
             this.form.orderNo= orderNo, 
             this.form.orderTime=hhmmss(orderTime), 
             this.form.deliverAddress= deliverAddress, 
             this.form.remarks= remarks, 
             this.form.orderAmount= orderAmount, 
             this.form.orderState= orderState, 
             this.form.deliveryTime= hhmmss(deliveryTime)
      })
    },
  },
  created() {
    this.reqData();
  },
};
</script>

<style lang="less" scoped>
item__label:before {
  content: "";
}
</style>